<template>
    <div class="profile-card">
      <h3>{{name}}</h3>
      <!-- <p>Email: zhangsan@example.com</p> -->
      <p>Phone: {{phonee}}</p>
      <p>UserID: {{userID}}</p>
    </div>

    <el-container>
      <el-header><self_navigate></self_navigate></el-header>
      <el-main><router-view/></el-main>
    </el-container>
</template>

<script>
import self_navigate from './Self_navigate.vue';
import { useRouter} from 'vue-router'
import API from '@/api/personalInformation'
import { reactive, ref } from 'vue';
export default {
  components:{
    self_navigate
  },

  setup(){
    let userID = ref('')
    let token = localStorage.getItem('token')
    let userParams = reactive({
      size:1,
      current:1,
      phone:localStorage.getItem('loginuserphone')
    })
    function getID(){
      API.getID(userParams,token).then(res=>{
        userID.value = res.data.content.records[0].id
      }).catch(error=>{
      console.log(error)
      })
    }
    return {
      userParams,
      getID,
      userID
      };
  },

  created(){
    this.name = localStorage.getItem('loginusername')
    this.phonee = localStorage.getItem('loginuserphone')
    this.getID()
  }
  
};
</script>

<style scoped>
.profile-card {
  text-align: center;
  padding: 10px;
  border: 0px solid transparent;
  border-radius: 8px;
  background-color: transparent;
}


</style>
